/**
 * 学习目标：
 */
import React, { Component } from 'react';
import { Nav, NavLink, HashRouter, BrowserRouter } from 'react-router-dom';

export default class App extends Component {
  state = {
    currentUrl: '/',
  };
  componentDidMount() {
    window.addEventListener('hashchange', () => {
      console.log('location', window.location.hash);
      this.setState({ currentUrl: window.location.hash.slice(1) });
      // console.log('hash值变了', window.location.hash);
    });
  }

  // componentDidMount() {
  //   // 注册事件
  //   window.addEventListener('hashchange', () => {
  //     console.log('hash值变了', window.location.hash);
  //     // this.setState({
  //     //   currentHash: window.location.hash.slice(1),
  //     // });
  //   });
  // }

  render() {
    console.log('render执行了');
    const { currentUrl } = this.state;
    return (
      <div>
        <ul>
          <li>
            <a href="#/home">首页</a>
          </li>
          <li>
            <a href="#/my">我的音乐</a>
          </li>
          <li>
            <a href="#/friend">我的朋友</a>
          </li>
        </ul>
        <p>观察地址栏的变化</p>

        {currentUrl === '/' && <h1>首页组件</h1>}
        {currentUrl === '/home' && <h1>首页组件</h1>}
        {currentUrl === '/friend' && <Find></Find>}
        {currentUrl === '/my' && <MyMusic></MyMusic>}
      </div>
    );
  }
}

class Find extends React.Component {
  render() {
    return <h1>Find组件</h1>;
  }
}

class MyMusic extends React.Component {
  render() {
    return (
      <div>
        <h1>MyMusic组件</h1>
      </div>
    );
  }
}
